<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" />
    </div>
    <div class="form">
      <div class="phone">
        <span>
          手机号:
        </span>
        <Input v-model="phone" />
      </div>
      <div class="password">
        <span>
          密码:
        </span>
        <Input show-password v-model="passWord" />
      </div>
      <div class="submit">
        <Button @click="submit" :plain="true" :round="true">登录</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { Input, Message, Button } from "element-ui";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      passPhone: "1",
      passPassWord: ""
    };
  },
  methods: {
    ...mapActions(["login"]),
    submit() {
      let reg = /^1[0-9]{0,10}$/;
      if (
        reg.test(this.passPhone) &&
        this.passWord.length > 5 &&
        this.passWord.length < 16
      ) {
        this.login({ phone: this.passPhone, passWord: this.passPassWord })
          .then(() => {
            this.$router.push("/");
          })
          .catch(() => {
            Message("手机号或用户名错误");
          });
      } else {
        Message("手机号或用户名错误");
      }
    }
  },
  computed: {
    phone: {
      get() {
        return this.passPhone;
      },
      set(phone) {
        let reg = /^1[0-9]{0,10}$/;
        if (reg.test(phone)) {
          this.passPhone = phone;
        } else if (phone.length > 0) {
          Message("输入错误");
        }
      }
    },
    passWord: {
      get() {
        return this.passPassWord;
      },
      set(passWord) {
        if (passWord.length < 16) {
          this.passPassWord = passWord;
        }
      }
    }
  },
  components: {
    Input,
    Button
  }
};
</script>

<style scoped>
.login {
  display: flex;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100vh;
}
.logo img {
  margin-left: 50px;
  width: 50%;
  border-radius: 50%;
  background-image: linear-gradient(to right bottom, #ccccccff, #cccccc00);
}
.form {
  padding: 0 100px;
  flex: 1;
}
.form span {
  color: #ffffff;
}
.submit {
  display: flex;
  justify-content: center;
}
.password {
  margin: 20px 0;
}
.submit button {
  width: 70%;
}
</style>
